<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Restaurant Review Website</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/res.css">
        <script src="js/app.js"></script>
        <!-- <script src="js/games.js"></script>
        <script src="js/comments.js"></script>
        <script src="js/addcomments.js"></script> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <style>
        [v-cloak] {
        display:none;
        }
         .el-rate__icon{
            font-size: 30px;
          }
        
    </style>
 <body  , style="background-image:url(../images/back.gif)" >
    <div id="app" v-cloak>
        <div style="position: fixed;right: 20px;top:10px;width: 100px;height: 50px;line-height: 50px;text-align: center;background-color: #ddd;border-radius: 15px;">
            <a href="index.html" style="list-style: none;color: black;text-decoration: none;">返回首页</a>
        </div>
   
    <!--This is where the top navigation HTML codes will be loaded-->
    <div w3-include-html="topnavigationbar.html"></div>
    <section class="post-news-area section-padding-0-100">
        <div class="container" >
            <div class="row justify-content-center">
                <!-- Post Details Content Area -->
                    <div class="col-12 col-lg-8">
                            <div class="mt-100">
                                <div class="post-details-content mb-100">
                                    <div class="blog-thumbnail mb-50">
                                        <img :src="goodsData.image" id=GamesThumb alt="">
                                    </div>
                                    <div class="blog-content">
                                        <h4 id="GamesTitle" style="text-align: center; color:lightskyblue;">{{goodsData.name}}</h4>
                                        <div class="post-meta mb-30"  style="color:lightskyblue;" >
                                            <p style="color:lightskyblue;">Rating out of 10</p>
                                            Rating:<a  class="post-date" id="GamesRating" style="color:lightskyblue;">Rating:2</a>
                                            Category: <a  class="post-author" id="GamesType" style="color:lightskyblue;">sortBy: Chinese </a>
                                            <a  class="post-comments"style="color:lightskyblue;">Recommend:Yes</a>
                                        </div>
                                        <p id="GamesDescription" style="color:lightskyblue; background: grey;">{{goodsData.description}}</p>

                                            <h5> Located in : {{goodsData.locate}} </h5>
                                            <h5> Address : {{goodsData.address}} </h5>
                                            <h5> Hours : Open . Close {{goodsData.hour}} A.M </h5>
                                            <h5> Phone :{{goodsData.phone}} </h5>

                                        <div class="row mt-50">
                                            <div class="col-6">
                                                <el-rate
                                                    :value="goodsData.star"
                                                    disabled
                                                    show-score
                                                    text-color="#ff9900"
                                                    score-template="{value}">
                                                </el-rate>
                                            </div>
                                           
                                            <!-- <div class="col-6">
                                                <iframe src="" frameborder="0" allowfullscreen id="GamesVideo1"></iframe>
                                            </div>  -->
                                           
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex;margin-top: 12px;" v-for="item in oneData">
                                    <div style="width: 100px;">
                                        <div>{{item.lastname}}</div>
                                        <div style="font-size: 12px;">{{item.review_date|formatter}} {{item.review_time}}</div>
                                    </div>
                                    <div style="border: 1px solid black;width: 500px;">
                                        {{item.login_review}}
                                    </div>
                                </div>
                                
                                <div class="comment_area clearfix mb-70"style="background: grey;margin-top:30px">
                                        <h4 class="mb-50" style="color:lightskyblue; text-align: center; ">Comments</h4>
            
                                        <ol>
                                    
                                        <div id="commentsTable" class="row"></div>
                                        </ol>
                                </div>
            
                                <div class="post-a-comment-area mb-30 clearfix" id="reply">
                                    <h4 class="mb-50"style="color:lightskyblue;">Leave a reply</h4>

                                    <!-- Reply Form -->
                                    <div class="contact-form-area">
                                            <div class="row">
                                                <div class="col-12 col-lg-6">
                                                    <!-- <input type="text" v-model="form.review_star" class="form-control" id="ratingdetail" placeholder="Rating/10"> -->
                                                    <el-rate v-model="form.review_star"></el-rate>
                                                </div>
                                                <div class="col-12 col-lg-6" style="margin-top: 50px;">
                                                    <!-- <input type="email" v-model="form.emaildetail" class="form-control" id="emaildetail" placeholder="Email*"> -->
                                                </div>
                                                <div class="col-12">
                                                    <textarea name="message" class="form-control" id="commentsdetail" cols="30" rows="10" v-model="form.login_review" placeholder="Message"></textarea>
                                                </div>
                                                <div class="col-12">
                                                    <button class="btn egames-btn w-100" type="button" @click="submitForm" >Submit Comment</button>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
        
        </div>
    </section>
        <br><br>
    </div>
    <!--footer here-->
    <!--<div w3-include-html="footer.html"></div>-->
</body>
<!-- <script src="js/w3.js"></script> -->
<script>
        //to bring in other HTML on the fly into this page
        // w3.includeHTML();
        // console.log(JSON.parse(getQueryVariable("data")) )
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
</script>
  <script src="./api/axios.min.js"></script>
  <script src="./api/publicinfo.js"></script>
  <script src="./js/jquery.js"></script>
  <script src="./api/utils.js"></script>

  <script src="./js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
       function nowTime(){
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        var mint = date.getSeconds()
        var mints =  date.getMinutes()
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        if (mints >= 0 && mints <= 9) {
            mints = "0" + mints;
        }
        if (mint >= 0 && mint <= 9) {
        mint = "0" + mint;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + mints
                + seperator2 + mint;
        return currentdate;
    }
  
  </script>
  <script>
       var app = new Vue({
          el: '#app',
          data:{
            dataList:[],
            goodsData:{},
            oneData:[],
            form:{
                review_star:"",
                login_review:"",
                Restaurant_id:getQueryVariable("id"),
                login_id:getLocalStorage("userData").data.userInfo.login_id,
                review_date:"",
                review_time:""
            }
           
          },
          mounted(){
           
           
            get("/review",{}).then(res=>{
                
            })
            this.findOneData()
            this.findOneGoodsInfo()
          },
          filters:{
            formatter(value){
                let arrayList = value.split("T")
                return arrayList[0]
            }
          },
          methods:{
            findOneGoodsInfo(){
                post("/restaurant/one",{goodsId:getQueryVariable("id")}).then(res=>{
                    console.log(res.data)
                    this.goodsData = res.data[0]
                    })
            },
            findOneData(){
                post("/findonereview",{id:getQueryVariable("id")}).then(res=>{
                console.log(res.data)
                    this.oneData = res.data
                })
            },
            submitForm(){
                let time = nowTime()
                let arrayList = time.split(" ")
                this.form.review_date = arrayList[0]
                this.form.review_time = arrayList[1]
                post("/addreview",this.form).then(res=>{
                    console.log(res)
                    this.form.login_review = ""
                    this.form.review_star = ""
                    this.findOneData()
                    this.findOneGoodsInfo()
                })
            }
          }
          
          })
  
  
  </script>
</html>
